<!--
 * @Author: giteezr 2250368646@qq.com
 * @Date: 2023-12-22 09:37:08
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2024-01-05 15:54:32
 * @FilePath: \vue3+nodeJs\houtaiguanli\management-system\src\views\bus\components\boxTop\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box-top">
    <div class="box-top-title">智能网联网汽车安全监控大屏</div>
    <div class="rightIcon">
      <p style="cursor: pointer"  @click="goInfo">
        <el-icon :size="20"><User /></el-icon>
        <span> 个人中心 </span>
      </p>
      <p style="cursor: pointer">
        <el-icon :size="20"><SwitchButton /></el-icon>
        <span @click="goLogin"> 退出登录 </span>
      </p>
    </div>
  </div>
</template>
<script  lang="ts">
import {  setLocalStorage } from '@/utils/storage';
import router from '@/router';
import axios from 'axios';
export default {
  name: "boxTop",
  setup() {
     // 退出登录
     const goLogin = () => {
      setLocalStorage('token', '');
      setLocalStorage('userInfo', {});
      axios.defaults.headers.common['Authorization'] = ''
      router.push({ name: 'Login'})
    }
    // 个人中心
    const goInfo = () => {
      console.log("点击了我")
      router.push("/info")
    }
    return {
      goLogin,
      goInfo
    };
  },
};
</script>
<style scoped lang="less">
.box {
  background: url("../../../../assets/images/bus/box-bg.png") no-repeat;
  &-top {
    background: url(../../../../assets/images/bus/top-bg.png) no-repeat;
    height: 5%;
    background-size: 100%;
    &-title {
      color: #fff;
      text-align: center;
      // text-indent: 1.875rem;
      line-height: 3.125rem;
      font-size: 1.8rem;
      font-weight: bold;
      background-image: linear-gradient(
        to bottom,
        #f0f0f0,
        #f7fdfc,
        rgb(101 210 248)
      );
      color: transparent;
      -webkit-background-clip: text;
      letter-spacing: 0.1rem;
    }
  }
  .rightIcon {
    position: fixed;
    right: 6%;
    top: 4%;
    z-index: 2;
    display: flex;
    align-items: center;
    color: white;
    font-size: 0.9rem;
    > p {
      display: flex;
      align-items: center;
      padding: 0 0.2rem;
      .el-icon{
        color: #30f6ff;
      }
      span{
        padding: 0 0.1rem;
      }
    }
  }
}
</style>